<template>
    <div>
        <!-- 条件查询 -->

        <!-- 导航栏 -->
        <van-sticky>
            <van-tabs v-model="activeName" @click="chagneStatus(activeName)" style="width: 100%;">
                <van-tab title="全部订单" name="1"></van-tab>
                <van-tab title="未支付订单" name="2"></van-tab>
                <van-tab title="已支付订单" name="3"></van-tab>
            </van-tabs>
            <!-- 搜索 -->
            <van-search v-model="params.carNumber" placeholder="请输入车牌号" @load="chagneStatus(params.status)"
                @search="chagneStatus(params.status)" />
        </van-sticky>
        <!-- 表单显示 -->
        <div style="width:100%;overflow:hidden;">
            <van-list :finished="finished" finished-text="没有更多了" loading-text="加载中" style="margin-bottom:60px">
                <van-cell v-for="item in list" :key="item.id"
                    style="margin-top: 10px;border-radius: 15px 15px 15px 15px;background-color: #FFF8DC;">
                    <van-empty style="width:100%;height:79vh" description="暂无订单" v-if="listLength == 0" />
                    <template slot="default">
                        <div @click="ref(item.id)" v-show="listLength > 0">
                            <div>
                                订单编号:{{ item.id }}
                            </div>
                            <div>
                                车辆信息：{{ item.carNumber }}
                            </div>
                            <div>
                                开始时间：{{ item.startTime }}
                            </div>
                            <div>
                                结束时间：{{ item.endTime }}
                            </div>
                            <div>
                                订单状态：
                                <van-tag type="success" v-if="item.status == '订单已完成'">订单已完成</van-tag>
                                <van-tag type="danger" v-if="item.status == '未支付订单'">未支付订单</van-tag>
                                <van-tag type="primary" v-if="item.status == '车辆尚未离开'">车辆尚未离开</van-tag>
                            </div>
                        </div>
                    </template>
                </van-cell>
            </van-list>
        </div>
    </div>
</template>

<script>
import { list, queryBycondition } from '@/api/order.js';

export default {
    data() {
        return {
            activeName: '1',
            list: [
                {
                    carNumber: '',
                    discountId: '',
                    endTime: '',
                    id: '',
                    money: '',
                    parkingId: '',
                    positionId: '',
                    startTime: '',
                    status: '',
                    userId: '',
                }
            ],
            listLength: 0,
            loading: false,
            finished: false,
            value: '',
            params: {
                status: '',
                carNumber: ''
            }
        };
    },
    created() {
        this.chagneStatus()
    },
    methods: {
        onSearch(val) {
            console.log(this.params.carNumber)
        },
        // 初始化数据
        async init() {
            const result = await list()
            this.list = result.data.data
            this.listLength = result.data.data.length
        },
        // 跳转方法
        async ref(id) {
            await this.$router.push(`/detail/${id}`)
        },
        // 导航栏改变触发方法
        async chagneStatus(data) {
            if (data != 1) {
                this.params.status = data
            } else {
                this.params.status = ''
            }
            const result = await queryBycondition(this.params)
            console.log(result.data.data.records)
            // this.list = []
            this.list = result.data.data.records
            this.listLength = result.data.data.records.length
            console.log("总条数：" + this.listLength)
        },
    },
};
</script>
